<ng-container *ngIf="!isCarousel">
  <Flex *ngFor="let item of gridData; let i = index" [justify]="'center'" [align]="'stretch'">
    <FlexItem
      TouchFeedbackDirective
      *ngFor="let subItem of item; let j = index"
      [ngClass]="itemCls"
      [ngStyle]="itemStyle"
      [className]="['am-grid-item-active']"
      [activeStyle]="activeStyle"
    >
      <div
        *ngIf="subItem !== null"
        class="{{ defaultProps.prefixCls }}-item-content"
        (click)="click(subItem, i * columnNum + j)"
      >
        <div class="{{ defaultProps.prefixCls }}-item-inner-content column-num-{{ columnNum }}">
          <img
            *ngIf="subItem.icon && getContentType(subItem.icon) === 'url'"
            src="{{ subItem.icon }}"
            class="{{ defaultProps.prefixCls }}-icon"
          />
          <Icon
            *ngIf="subItem.icon && getContentType(subItem.icon) === 'icon'"
            [type]="subItem.icon"
            [size]="subItem.size"
          ></Icon>
          <div
            *ngIf="subItem.icon && getContentType(subItem.icon) === 'innerHTML'"
            [innerHTML]="subItem.icon | safeHTML"
          ></div>
          <ng-template
            *ngIf="subItem.icon && getContentType(subItem.icon) === 'TemplateRef'"
            [ngTemplateOutlet]="subItem.icon"
          ></ng-template>
          <div class="{{ defaultProps.prefixCls }}-text">{{ subItem.text }}</div>
        </div>
      </div>
      <div *ngIf="subItem === null" class="{{ defaultProps.prefixCls }}-null-item"></div>
    </FlexItem>
  </Flex>
  <ng-content></ng-content>
</ng-container>

<Carousel
  *ngIf="isCarousel && carouselDataTmp.length > 0"
  [autoplay]="false"
  [infinite]="true"
  [selectedIndex]="0"
  [autoplayInterval]="3000"
  [dots]="carouselProps.dots"
  [dragging]="carouselProps.dragging"
>
  <CarouselSlide
    *ngFor="let gridData of carouselDataTmp"
    class="{{ defaultProps.prefixCls }}-carousel-page"
    style="display: block;"
  >
    <Flex *ngFor="let item of gridData; let i = index" [justify]="'center'" [align]="'stretch'">
      <FlexItem
        TouchFeedbackDirective
        *ngFor="let subItem of item; let j = index"
        class="{{ defaultProps.prefixCls }}-item"
        [ngStyle]="itemStyle"
        [className]="['am-grid-item-active']"
      >
        <div
          *ngIf="subItem !== null"
          class="{{ defaultProps.prefixCls }}-item-content"
          (click)="click(subItem, i * columnNum + j)"
        >
          <div class="{{ defaultProps.prefixCls }}-item-inner-content column-num-4">
            <img class="{{ defaultProps.prefixCls }}-icon" src="{{ subItem.icon }}" />
            <div class="{{ defaultProps.prefixCls }}-text">{{ subItem.text }}</div>
          </div>
        </div>
        <div *ngIf="subItem === null" class="{{ defaultProps.prefixCls }}-null-item"></div>
      </FlexItem>
    </Flex>
  </CarouselSlide>
</Carousel>
